<template>
    <div style="height: 100%">
        <FancyList :request="onRequest" >
            <template #default="{imageUrl,name}">
                <img width="100" :src="imageUrl">
                <p>{{ name }}</p>
            </template>
        </FancyList>
    </div>
</template>

<script lang="ts" setup>
import FancyList,{type Iparams} from '@/components/fancy-list/index.vue'
import axios from 'axios';

const onRequest = async (params:Iparams) => {
    //调用接口
    const response = await axios.get('http://localhost:3000/phones',{
        params:{
            _pages: params.pageNum,
            _limit: params.pageSize
        }
    })
    console.log('response',response);
    
    return {
        list:response.data,
        total:response.headers['x-total-count'],
    }
}

</script>